/** useState使用 */
import React, { useState } from 'react'

export default function HookState() {

  // 1.声明简单状态数据(如果当前组件中包含大量不相关状态数据，推荐使用这种方式)
  const [name, setName] = useState("damu")
  const [age, setAge] = useState(18)

  // 2.声明对象状态数据(如果当前组件中有一些互相关联的数据，建议声明为对象格式方便维护)
  const [state, setState] = useState({
    title: "文章标题",
    content: "文章内容",
    publish: Date.now()
  })

  const changeName = () => {
    setName("大牧")
  }

  const changeAge = () => {
    setAge(22)
  }

  const changeTitle = () => {
    // 使用对象的方式维护状态数据，一旦要更新数据
    // 需要将对象中的所有数据进行更新
    setState({
      title: "江雪",
      content: state.content,
      publish: Date.now()
    })
  }

  const changeContent = () => {
    setState({
      title: state.title,
      content: "千山鸟飞绝，万径人踪灭，孤舟蓑笠翁，独钓寒江雪",
      publish: Date.now()
    })
  }

  // react中没有过滤器
  // 如果要格式化展示的内容数据，使用自定义函数进行处理
  const formatDate = (time) => {
    const date = new Date(time)
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
  }

  return (
    <div>
      <h3>2. useState使用</h3>
      <div>
        <p>姓名：{name}</p>
        <p>年龄：{age}</p>
        <button onClick={changeName}>更改姓名</button>
        <button onClick={changeAge}>更改年龄</button>
      </div>
      <div>
        <p>标题：{state.title}</p>
        <p>内容：{state.content}</p>
        <p>发表：{formatDate(state.publish)}</p>
        <button onClick={changeTitle}>修改标题</button>
        <button onClick={changeContent}>修改内容</button>
      </div>
    </div>
  )
}
